<template>
  <div class="goods detail">
    <img :src="data.image" class="cover"/>
    <div class="property">
      <h3 class="title">{{ data.title }} {{ data.code }}</h3>
      <p class="desc">{{ data.description }}</p>
      <div class="row">
        <label>官网价格:</label>
        <div class="info">
          <span class="current-price">{{ data.currentPrice }}</span>
          <span class="initial-price">￥{{ data.initialPrice }}</span>
        </div>
      </div>
      <div class="row">
        <label>享有折扣:</label>
        <div class="info">
          <img src="../../assets/front/goods/discount.png" class="discount-img"/>
          <span class="discount">{{ data.ruleName != null ? data.ruleName : '元' }}</span>
        </div>
      </div>

      <div class="row">
        <label>商品类型:</label>
        <div class="info">虚拟卡(电子卡密)</div>
      </div>

      <div class="row">
        <label>适用人群:</label>
        <div class="info">{{ data.type }}</div>
      </div>
      <div class="row">
        <label>服务承诺:</label>
        <div class="info">
          <img src="../../assets/front/goods/property-icon-1.png" class="property"/>
          <span class="service-tag">专业品质</span>

          <img src="../../assets/front/goods/property-icon-2.png" class="property"/>
          <span class="service-tag">官方直营</span>

          <img src="../../assets/front/goods/property-icon-3.png" class="property"/>
          <span class="service-tag">随时改</span>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import {getCurrentInstance, reactive} from "vue";
import router from "../../router";

const {proxy} = getCurrentInstance();
const data = reactive({
  code: null,
  title: null,
  description: null,
  image: null,
  currentPrice: null,
  initialPrice: null,
  type: null,
  checkup_1: [],
  checkup_2: [],
  checkup_3: [],
  checkup_4: [],
  count_1: null,
  count_2: null,
  count_3: null,
  count_4: null,
  checkupCount: null
})
let id = router.currentRoute.value.params.id;
let mode = router.currentRoute.value.params.mode;

function loadSnapshot() {
  let json = {
    snapshotId: id
  };
  let url = (mode == "front") ? "/front/goods/searchSnapshotForFront" : "/front/goods/searchSnapshotForMis";
  proxy.$http(url, 'POST', json, true, function (resp) {
    let result = resp.result;
    data.code = result.code;
    data.title = result.title;
    data.description = result.description;
    data.image = `${proxy.$minioUrl}/${result.image}`;
    data.currentPrice = result.currentPrice;
    data.initialPrice = result.initialPrice;
    data.ruleName = result.ruleName;
    data.type = result.type;
    data.tag = result.tag;
    data.checkup_1 = result.checkup_1;
    data.checkup_2 = result.checkup_2;
    data.checkup_3 = result.checkup_3;
    data.checkup_4 = result.checkup_4;
    data.count_1 = data.checkup_1.length;
    data.count_2 = data.checkup_2.length;
    data.count_3 = data.checkup_3.length;
    data.count_4 = data.checkup_4.length;
    data.checkupCount = data.count_1 + data.count_2 + data.count_3 + data.checkup_4;
  });
}

loadSnapshot();
</script>
<style scoped lang="less">
@import "goods_snapshot.less";
</style>
